<template>
  <div class='mobile-singleSelect-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请选择一个选项
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "otherOptionEmpty"'>
      请检查答案
    </div>
    <ul class='singleSelect-option-list'>
      <li class='option-item'
          v-for='(option, index) of question.optionList'
          :key='index'
          :class='{
            paperActive:option.isSelected && (!isRecord || (isRecord && !question.useAnswer)),
            recordActive:option.isSelected && isRecord && question.useAnswer,
            recordCorrect:(option.isResult === 1 || hasNoAnswer)&& isRecord && question.useAnswer,
            recordError:(option.isResult === 0 && !hasNoAnswer) && option.isSelected && isRecord && question.useAnswer,
            showInput: option.isSelected && option.isOther,
            showValid: question.validType === "otherOptionEmpty" &&
                       option.isOther &&
                       option.isSelected &&
                       !option.resultText
          }'
          @click='selectOption(option)'>
        <div class='option-circle'></div>
        <div class='option-content' v-html='option.title'></div>
        <input
          v-if='option.isSelected && option.isOther'
          :ref='"input" + option.optionId'
          class='option-other'
          type="text"
          @focus='resetValidType'
          v-model.trim='option.resultText'
          :disabled='isRecord'
        />
        <div class='valid-tip-item'
             v-show='question.validType === "otherOptionEmpty" &&
                     option.isOther &&
                     option.isSelected &&
                     !option.resultText'>
          请输入填空项的内容
        </div>
      </li>
    </ul>
    <!-- 答案相关 -->
    <div class='qa-answer'
         v-if='isRecord && question.useAnswer'>
      <!-- 分数 -->
      <div class='qa-score-wrapper'>
        <div class='score-label'>分值：</div>
        <div class='score-number'>{{question.score || 0}}分</div>
      </div>
      <!-- 答案解析 -->
      <div class='qa-answer-parse'
           v-if='question.useAnswer && question.answerParse'>
        <div class='answer-title'>答案解析：</div>
        <div class='answer-content' v-html='question.answerParse'></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mobileSingleSelect',
  data () {
    return {
      hasNoAnswer: false // 是否没有设置答案
    }
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    selectOption (option) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.question.optionList.forEach(opt => {
        if (opt.optionId === option.optionId) {
          opt.isSelected = true
        } else {
          opt.isSelected = false
        }
      })
      // 如果选中的是其他选项，显示输入框，并自动聚焦
      if (option.isOther) {
        this.$nextTick(() => {
          this.$refs['input' + option.optionId][0].focus()
        })
      }
    },
    init () {
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          this.question.optionList.forEach(option => {
            let targetOption = optionResults.filter(item => item.optionId === option.optionId)[0]
            if (targetOption) {
              option.isSelected = true
              option.resultText = targetOption.resultText || ''
            } else {
              option.isSelected = false
            }
          })
          let answerList = this.question.optionList.filter(option => option.isResult === 1)
          if (answerList.length === 0) {
            this.hasNoAnswer = true
          }
        }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-singleSelect-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .singleSelect-option-list
    .option-item
      position relative
      padding 10px 20px 10px 10px
      border 1px solid #dde5ed
      border-radius 4px
      display flex
      align-items center
      margin-bottom 8px
      cursor pointer
      background #fff
      box-sizing border-box
      &:last-child
        margin-bottom 0
      &.paperActive
        background rgba(38, 114, 255, 0.1)
        border-color #2672ff
      &.recordCorrect
        background rgba(33, 166, 90, 0.1)
        border-color #21a65a
      &.recordError
        background rgba(182, 44, 44, 0.1)
        border-color #b62c2c
      &.paperActive, &.recordActive
        .option-circle
          position relative
          border-color #2672ff
          &::after
            content ''
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            margin auto
            display block
            width 10px
            height 10px
            background #2672ff
            border-radius 50%
      &.showInput
        margin-bottom 48px
      &.showValid
        margin-top 30px
      .option-circle
        flex none
        width 14px
        height 14px
        border 1px solid #dde5ed
        border-radius 50%
        margin-right 10px
      .option-content
        flex 1
        width 0
        line-height 1.4
        font-size 14px
        >>> img, >>> iframe, >>> video
          max-width 100%
      .option-other
        position absolute
        bottom -39px
        left -1px
        height 38px
        width calc(100% + 2px)
        display block
        border 1px solid #dde5ed
        border-radius 4px
        line-height 18px
        background #fff
        outline none
        font-size 14px
        box-sizing border-box
        padded_box(border-box, 10px)
        &:disabled
          opacity 1
      .valid-tip-item
        position absolute
        left 0
        top -30px
        line-height 30px
        color #ef6262
        font-size 14px
  .qa-answer
    margin 15px 0 10px
    border-top 1px dashed #dde5ed
    .qa-score-wrapper
      border-bottom 1px dashed #dde5ed
      padding 10px
      display flex
      align-items center
      .score-label
        font-size 14px
        color #333
      .score-number
        font-size 14px
        color #aaa
    .qa-answer-parse
      border-bottom 1px dashed #dde5ed
      border-radius 4px
      padding 10px
      .answer-title
        font-size 14px
        color #333
        margin-bottom 10px
      .answer-content
        font-size 14px
        line-height 1.5
        color #aaa
        >>> img, >>> iframe, >>> video
          max-width 100% !important
</style>
